/*
 * @Author: didididijiajiajia 11643763+didididijiajiajia@user.noreply.gitee.com
 * @Date: 2023-08-26 15:01:37
 * @LastEditors: didididijiajiajia 11643763+didididijiajiajia@user.noreply.gitee.com
 * @LastEditTime: 2023-08-27 15:52:41
 * @FilePath: \vue低代码101-111\low_code\src\components\commons\dialog.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { ElButton, ElDialog, ElInput } from "element-plus";
import { defineComponent, createVNode, render, reactive } from "vue";

const DialogComponent = defineComponent({
    props: {
        option: Object
    },
    setup(props, ctx) {
        const state = reactive({
            option: props.option,
            ishow: false
        })
        ctx.expose({
            showDialog(option) {
                state.option = option
                state.ishow = true
            }
        })
        const onCancel = () => {
            state.ishow = false
        }
        const onConfirm = () => {
            state.ishow = false
            state.option.onConfirm && state.option.onConfirm(state.option.content)
        }
        return () => {
            return <ElDialog v-model={state.ishow} title={state.option.title}>
                {{
                    default: () => <ElInput type="textarea" v-model={state.option.content} rows={10}></ElInput>,
                    footer: () => state.option.footer && <div>
                        <ElButton onClick={onCancel}>取消</ElButton>
                        <ElButton type="primary" onClick={onConfirm}>确定</ElButton>
                        </div>
                }}
            </ElDialog>
        }
    }
})
let vm;
export function $dialog(option) {
    if (!vm) {
        let el = document.createElement("div");
        vm = createVNode(DialogComponent, { option })
        document.body.appendChild((render(vm, el), el))
    }
    const { showDialog } = vm.component.exposed
    // debugger;
    showDialog(option)

}